<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"/>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>FSR</title>


    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="/static/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">

    {% block load_css %}
    {% endblock %}

</head>

<body>
<div id="wrapper" >
    {% block mem %}
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element"> <span>
                             </span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong
                                    class="font-bold">{{ request.user }}</strong>
                             </span> <span class="text-muted text-xs block">{% if request.user.is_superuser %}
                                超级管理员{% else %}普通用户{% endif %}<b class="caret"></b></span> </span>
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a href="{% url 'user_detail' request.user.id %}">个人信息</a></li>
                                <li class="divider"></li>
                                <li><a href="{% url 'user_logout' %}">注销</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="{% ifequal request.path '/dashboard/' %}active{% endifequal %}">
                        <a href="{% url 'index' %}"><i class="fa fa-laptop"></i> <span class="nav-label">首页</span></a>
                    </li>

                        <li class="{% if request.path == '/users/user/list/' %}
                                    active
                               {% elif request.path == '/users/user/create/' %}
                                    active
                               {% elif request.path == '/users/user/modify/' %}
                                    active
                               {% elif '/users/user/detail/' in request.path %}
                                    active
                               {% elif '/users/group/list/' in request.path %}
                                    active
                               {% elif '/users/group/create/' in request.path %}
                                    active
                               {% elif '/users/group/modify/' in request.path %}
                                    active
                               {% elif '/users/perm/list/' in request.path %}
                                    active
                               {% elif '/users/perm/create/' in request.path %}
                                    active
                               {% elif '/users/user/set_perm/' in request.path %}
                                    active
                               {% elif '/users/group/set_perm/' in request.path %}
                                    active
                               {% elif '/users/group/set_perm/' in request.path %}
                                    active
                               {% endif %}">
                            <a href="#"><i class="fa fa-inbox"></i> <span class="nav-label">用户管理</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level collapse">
                                    <li class="download"><a href="{% url 'user_list' %}">用户管理</a>
                                    </li>
                                    <li class="download"><a href="{% url 'group_list' %}">用户组管理</a>
                                    </li>
                            </ul>
                        </li>

                        <li class="{% if request.path in '/resources/group/list/' %}
                                    active
                               {% elif request.path == '/products/product/list/' %}
                                    active
                               {% elif request.path in '/resources/servers/list/' %}
                                    active
                               {% elif '/resources/servers/detail/' in request.path %}
                                    active
                               {% elif request.path in '/resources/servers/set_product/' %}
                                    active
                               {% elif request.path in '/resources/serveruser/list/' %}
                                    active
                               {% elif '/resources/serveruser/detail/' in request.path %}
                                    active
                               {% endif %}">
                            <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">资产管理</span><span
                                    class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">

                                    <li class=""><a href="{% url 'server_list' %}">资产主机</a>
                                    </li>


                                    <li class=""><a href="{% url 'servergroup_list' %}">资产组</a>
                                    </li>

                                    <li class=""><a href="{% url 'serveruser_list' %}">资产用户</a>
                                    </li>
                            </ul>

                            <li class="{% if request.path in '/devops/autorecovery/' %}
                                    active
                                {% endif %}">
                            <a href="#"><i class="fa fa-inbox"></i> <span class="nav-label">故障自愈</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level collapse">
                                    <li class="download"><a href="{% url 'auto_recovery' %}">自愈字典配置</a></li>
                                </ul>
                            </li>

                            <li class="{% if request.path in '/devops/monitor_config/' %}
                                    active
                                {% elif '/devops/chart_list/' in request.path %}
                                    active
                                {% elif '/devops/chart_detail/' in request.path %}
                                    active
                                {% elif '/dbmonitor/mysql_dblist/' in request.path %}
                                    active
                                {% elif '/dbmonitor/mysql_detail/' in request.path %}
                                    active
                                {% endif %}">
                                <a href="#"><i class="fa fa-inbox"></i> <span class="nav-label">监控中心</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level">
                                    <li class="download"><a href="{% url 'monitor_config' %}">探点监控</a></li>
                                    <li class="download"><a href="{% url 'chart_list' %}">主机监控</a>
                                    <li class="download"><a href="{% url 'mysql_dblist' %}">MySQL监控</a>
                                    <li class="download"><a href="{% url 'oracle_dblist' %}">Oracle监控</a>
                                </ul>
                            </li>

                            <li class="{% if request.path in '/alert/alert_history/' %}
                                    active
                               {% elif request.path == '/alert/alert_linkperson/' %}
                                    active
                               {% elif request.path == '/alert/alert_linkgroup/' %}
                                    active
                                {% endif %}">
                                <a href="#"><i class="fa fa-inbox"></i> <span class="nav-label">报警中心</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level">
                                    <li class="download"><a href="{% url 'alert_history' %}">报警自愈历史</a></li>
                                    <li class="download"><a href="{% url 'alert_linkperson' %}">报警联系人</a></li>
                                    <li class="download"><a href="{% url 'alert_linkgroup' %}">报警联系组</a></li>
                                </ul>
                            </li>

                        </li>
                    {% if request.user.is_superuser %}
                    <li class="{% if request.path == '/alert/attentionconfig/' %}
                                    active
                               {% endif %}">
                            <a href="#"><i class="fa fa-inbox"></i> <span class="nav-label">系统管理</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level collapse">
                                    <li class="download"><a href="{% url 'attentionconfig' %}">报警服务设置</a>
                                    </li>
                            </ul>
                        </li>
                    {%endif%}



                </ul>

            </div>
        </nav>
    {% endblock %}


    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
                    </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">

                    <li>
                        <a href="{% url 'user_logout' %}">
                            <i class="fa fa-sign-out"></i> 退出
                        </a>
                    </li>
                </ul>

            </nav>
        </div>

        {% block mbx %}
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-sm-10">
                    <h2></h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="{% url 'index' %}">首页</a>
                        </li>
                    </ol>
                </div>
                <div class="col-sm-2">
                </div>
            </div>
        {% endblock %}

        {% block body %}

        {% endblock %}

    </div>


</div>


<!-- Mainly scripts -->
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Flot -->
<script src="/static/js/plugins/flot/jquery.flot.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.time.js"></script>

<!-- Custom and plugin javascript -->
<script src="/static/js/inspinia.js"></script>
<script src="/static/js/plugins/pace/pace.min.js"></script>

<!-- Sparkline -->
<script src="/static/js/plugins/sparkline/jquery.sparkline.min.js"></script>

<script>
    $(document).ready(function () {

        var sparklineCharts = function () {
            $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52], {
                type: 'line',
                width: '100%',
                height: '50',
                lineColor: '#1ab394',
                fillColor: "transparent"
            });

            $("#sparkline2").sparkline([32, 11, 25, 37, 41, 32, 34, 42], {
                type: 'line',
                width: '100%',
                height: '50',
                lineColor: '#1ab394',
                fillColor: "transparent"
            });

            $("#sparkline3").sparkline([34, 22, 24, 41, 10, 18, 16, 8], {
                type: 'line',
                width: '100%',
                height: '50',
                lineColor: '#1C84C6',
                fillColor: "transparent"
            });
        };

        var sparkResize;

        $(window).resize(function (e) {
            clearTimeout(sparkResize);
            sparkResize = setTimeout(sparklineCharts, 500);
        });

        sparklineCharts();


        var data1 = [
            [0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 20], [11, 10], [12, 13], [13, 4], [14, 7], [15, 8], [16, 12]
        ];
        var data2 = [
            [0, 0], [1, 2], [2, 7], [3, 4], [4, 11], [5, 4], [6, 2], [7, 5], [8, 11], [9, 5], [10, 4], [11, 1], [12, 5], [13, 2], [14, 5], [15, 2], [16, 0]
        ];
        $("#flot-dashboard5-chart").length && $.plot($("#flot-dashboard5-chart"), [
                data1, data2
            ],
            {
                series: {
                    lines: {
                        show: false,
                        fill: true
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 0,
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,

                    borderWidth: 2,
                    color: 'transparent'
                },
                colors: ["#1ab394", "#1C84C6"],
                xaxis: {},
                yaxis: {},
                tooltip: false
            }
        );

    });
</script>

{% block load_js %}
{% endblock %}

</body>
</html>
